<template>
    <div class="head">
        <a href="/" class="head__logo"><img src="../assets/images/logo.png"/></a>
        <p class="head__title">小阳子的博客</p>
        <div class="head__nav" v-if="navShow">
            <ul>
                <li v-for="(item,index) in nav" :key="index">
                    <a :href="item.link" :class="{active: item.active}">{{item.name}}</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:"headNav",

    data(){
        return {
            navShow: false,
            
            nav: [
                {
                    name: "Home",
                    link: "/",
                    active: false
                },
                {
                    name: "About",
                    link: "/about",
                    active: false
                },
            ]
        }
    },

    created() {
        // link
        let local = location.pathname;
        for(let i in this.nav) {  
            this.nav[i].active = false;          
            if(this.nav[i].link == local) {
                this.nav[i].active = true;
            }
        }
    }
}
</script>

<style lang="less">
    @import '../assets/css/common';
    .head {
        display: flex;
        align-items: center;
        height: 64px;
        background: #fff;
        position: relative;
        z-index: 10;
        box-shadow: 0 2px 8px #f0f1f2;
        &__logo {
            width: 40px;
            height: 30px;
            display: flex;
            align-items: center;
            margin-left: 88px;
            img {
                width: 100%;
            }
        }
        &__title {
            font-size: 20px;
            margin-left: 10px;
        }
        &__nav {
            ul {
                display: flex;
                align-items: center;
            }
            li {
                width: 120px;
                height: 64px;
                color: #eee;    
                line-height: 64px;                            
            }
        }
        a {
            color: #aaa;
            &.active,
            &:hover {
                color: #fff;
            }             
        }
    }
</style>

